import { BrowserProvider, Contract, JsonRpcProvider, formatEther, parseEther } from "ethers";

// 1. 创建 Provider（读）
const readProvider = new JsonRpcProvider("https://mainnet.infura.io/v3/YOUR_KEY");

// 2. 连接浏览器钱包（Signer）
const browserProvider = new BrowserProvider(window.ethereum!);
const signer = await browserProvider.getSigner();

// 3. 定义 ABI 与合约地址
const ERC20_ABI = [
  "function balanceOf(address) view returns (uint256)",
  "function transfer(address to, uint256 amount) returns (bool)",
  "event Transfer(address indexed from, address indexed to, uint256 value)",
];
const USDC_ADDRESS = "0xA0b86a33E9E31A0E6dF1d4E9f7B9C3d2e4F5a6B7";

// 4. 读取：仅依赖 Provider
const readContract = new Contract(USDC_ADDRESS, ERC20_ABI, readProvider);
const balance = await readContract.balanceOf(signer.address);
console.log("Balance:", formatEther(balance));

// 5. 写入：绑定 Signer
const writeContract = new Contract(USDC_ADDRESS, ERC20_ABI, signer);
const tx = await writeContract.transfer("0xRecipient...", parseEther("1"));
const receipt = await tx.wait();
console.log("Confirmed in block:", receipt?.blockNumber);

// 6. 监听事件
readContract.on("Transfer", (from, to, value, event) => {
  console.log(`Transfer: ${from} ->${to} : ${formatEther(value)}`);
});

import {
  createPublicClient, createWalletClient, http, parseEther, formatEther,
  custom, getContract, erc20Abi
} from "viem";
import { mainnet } from "viem/chains";
import type { Transport, Chain, Account } from "viem";

// 1. Public Client（读）
const publicClient = createPublicClient({
  chain: mainnet,
  transport: http("https://mainnet.infura.io/v3/YOUR_KEY"),
});

// 2. Wallet Client（写）
const walletClient = createWalletClient({
  chain: mainnet,
  transport: custom(window.ethereum!),
});

const [account] = await walletClient.getAddresses();

// 3. 读取：readContract
const balance = await publicClient.readContract({
  address: "0xA0b86a33E9E31A0E6dF1d4E9f7B9C3d2e4F5a6B7",
  abi: erc20Abi,
  functionName: "balanceOf",
  args: [account],
});
console.log("Viem Balance:", formatEther(balance));

// 4. 写入：writeContract
const hash = await walletClient.writeContract({
  address: "0xA0b86a33E9E31A0E6dF1d4E9f7B9C3d2e4F5a6B7",
  abi: erc20Abi,
  functionName: "transfer",
  args: ["0xRecipient...", parseEther("1")],
  account,
});

// 5. 等待确认
const receipt = await publicClient.waitForTransactionReceipt({ hash });
console.log("Confirmed:", receipt.blockNumber, "Status:", receipt.status);

// 6. 监听事件
const unwatch = publicClient.watchContractEvent({
  address: "0xA0b86a33E9E31A0E6dF1d4E9f7B9C3d2e4F5a6B7",
  abi: erc20Abi,
  eventName: "Transfer",
  onLogs: (logs) => {
    for (const log of logs) {
      console.log(`Transfer: ${log.args.from} ->${log.args.to} : ${formatEther(log.args.value!)}`);
    }
  },
});

interface EIP6963ProviderInfo {
  rdns: string;
  uuid: string;
  name: string;
  icon: string;
}

interface EIP6963ProviderDetail {
  info: EIP6963ProviderInfo;
  provider: any;
}

const providers: EIP6963ProviderDetail[] = [];

window.addEventListener("eip6963:announceProvider", (event: any) => {
  const { info, provider } = event.detail as EIP6963ProviderDetail;
  if (!providers.find((p) => p.info.uuid === info.uuid)) {
    providers.push({ info, provider });
    console.log("Wallet discovered:", info.name);
  }
});

// 触发所有钱包开始广播
window.dispatchEvent(new Event("eip6963:requestProvider"));

// 选择后连接
async function connectWallet(provider: any) {
  const accounts = await provider.request({
    method: "eth_requestAccounts",
  });
  console.log("Connected:", accounts[0]);
}

declare global {
  interface Window {
    ethereum?: any;
  }
}

async function connectEIP1193() {
  if (!window.ethereum) {
    throw new Error("No EIP-1193 provider found. Please install a wallet.");
  }

  // 请求连接
  const accounts = await window.ethereum.request({
    method: "eth_requestAccounts",
  });

  const chainId = await window.ethereum.request({ method: "eth_chainId" });
  console.log("Connected account:", accounts[0], "Chain:", chainId);

  // 监听账户切换
  window.ethereum.on("accountsChanged", (newAccounts: string[]) => {
    if (newAccounts.length === 0) {
      console.log("Wallet disconnected");
    } else {
      console.log("Switched to:", newAccounts[0]);
    }
  });

  // 监听链切换
  window.ethereum.on("chainChanged", (newChainId: string) => {
    console.log("Switched chain to:", newChainId);
    // 推荐刷新页面重载状态
    window.location.reload();
  });

  // 监听连接与断开
  window.ethereum.on("connect", (info: { chainId: string }) => {
    console.log("Connected to chain", info.chainId);
  });
  window.ethereum.on("disconnect", (error: Error) => {
    console.log("Disconnected:", error);
  });

  return { account: accounts[0], chainId };
}

import { createPublicClient, http, parseEther, formatGwei } from "viem";
import { mainnet } from "viem/chains";

const publicClient = createPublicClient({
  chain: mainnet,
  transport: http("https://mainnet.infura.io/v3/YOUR_KEY"),
});

// 1. 估算 gasLimit
const estimatedGas = await publicClient.estimateGas({
  account: "0xSenderAddress...",
  to: "0xRecipientAddress...",
  value: parseEther("0.01"),
  data: "0x",
});
console.log("Estimated gas limit:", estimatedGas);

// 2. 估算 EIP-1559 费用
const { maxFeePerGas, maxPriorityFeePerGas } =
  await publicClient.estimateFeesPerGas();

// 3. 前端三档位 UI 计算逻辑
function getGasTiers(baseMax: bigint, basePriority: bigint) {
  return {
    slow: {
      maxFeePerGas: (baseMax * 100n) / 100n,
      maxPriorityFeePerGas: (basePriority * 80n) / 100n,
    },
    standard: {
      maxFeePerGas: (baseMax * 115n) / 100n,
      maxPriorityFeePerGas: (basePriority * 100n) / 100n,
    },
    fast: {
      maxFeePerGas: (baseMax * 150n) / 100n,
      maxPriorityFeePerGas: (basePriority * 150n) / 100n,
    },
  };
}

const tiers = getGasTiers(maxFeePerGas, maxPriorityFeePerGas);
console.log("Standard tier maxFee:", formatGwei(tiers.standard.maxFeePerGas), "gwei");

import { useState, useCallback } from "react";
import {
  createPublicClient, createWalletClient, http, custom, parseEther,
  type WalletClient, type PublicClient, type Chain, type Hash
} from "viem";
import { mainnet } from "viem/chains";

interface SendTransactionState {
  isPending: boolean;
  isSuccess: boolean;
  isError: boolean;
  hash: Hash | null;
  error: Error | null;
  confirmations: number;
}

interface SendTxParams {
  to: `0x${string}`;
  value?: bigint;
  data?: `0x${string}`;
  gasLimit?: bigint;
  maxFeePerGas?: bigint;
  maxPriorityFeePerGas?: bigint;
}

export function useSendTransaction(
  publicClient: PublicClient,
  walletClient: WalletClient,
  targetConfirmations: number = 12
) {
  const [state, setState] = useState<SendTransactionState>({
    isPending: false,
    isSuccess: false,
    isError: false,
    hash: null,
    error: null,
    confirmations: 0,
  });

  const sendTransaction = useCallback(
    async (params: SendTxParams) => {
      setState({
        isPending: true,
        isSuccess: false,
        isError: false,
        hash: null,
        error: null,
        confirmations: 0,
      });

      try {
        // 1. 获取账户
        const [account] = await walletClient.getAddresses();
        if (!account) throw new Error("No connected account");

        // 2. 估算 Gas
        const estimatedGas = params.gasLimit ?? await publicClient.estimateGas({
          account,
          to: params.to,
          value: params.value,
          data: params.data,
        });

        // 3. 估算费用
        const { maxFeePerGas, maxPriorityFeePerGas } =
          params.maxFeePerGas && params.maxPriorityFeePerGas
            ? { maxFeePerGas: params.maxFeePerGas, maxPriorityFeePerGas: params.maxPriorityFeePerGas }
            : await publicClient.estimateFeesPerGas();

        // 4. 发送交易
        const hash = await walletClient.sendTransaction({
          account,
          to: params.to,
          value: params.value,
          data: params.data,
          gas: estimatedGas,
          maxFeePerGas,
          maxPriorityFeePerGas,
        });

        setState((s) => ({ ...s, hash }));

        // 5. 等待回执
        const receipt = await publicClient.waitForTransactionReceipt({
          hash,
          confirmations: targetConfirmations,
          timeout: 120_000, // 120 秒
        });

        const success = receipt.status === "success";

        setState({
          isPending: false,
          isSuccess: success,
          isError: !success,
          hash,
          error: success
            ? null
            : new Error(`Transaction reverted in block ${receipt.blockNumber}`),
          confirmations: targetConfirmations,
        });

        return { receipt, hash };
      } catch (err: any) {
        const error = err instanceof Error ? err : new Error(String(err));

        // 分类错误
        let classified = error;
        if (error.message?.includes("insufficient funds")) {
          classified = new Error("余额不足，无法支付交易费用");
        } else if (error.message?.includes("User rejected")) {
          classified = new Error("用户拒绝了签名请求");
        } else if (error.message?.includes("reverted")) {
          classified = new Error("合约执行回滚，交易失败");
        }

        setState({
          isPending: false,
          isSuccess: false,
          isError: true,
          hash: state.hash,
          error: classified,
          confirmations: 0,
        });

        throw classified;
      }
    },
    [publicClient, walletClient, targetConfirmations, state.hash]
  );

  return { sendTransaction, ...state };
}

import { useSendTransaction } from "./useSendTransaction";

const publicClient = createPublicClient({ chain: mainnet, transport: http() });
const walletClient = createWalletClient({ chain: mainnet, transport: custom(window.ethereum!) });

function TransferButton() {
  const { sendTransaction, isPending, isSuccess, isError, hash, error } =
    useSendTransaction(publicClient, walletClient);

  const handleSend = async () => {
    try {
      await sendTransaction({
        to: "0xRecipient...",
        value: parseEther("0.01"),
      });
    } catch (e) {
      // 错误已在 Hook 内分类与状态同步
    }
  };

  return (
    <button onClick={handleSend} disabled={isPending}>
      {isPending ? "发送中..." : isSuccess ? "已确认" : "发送 ETH"}
    </button>
  );
}

import { createPublicClient, http } from "viem";
import { mainnet } from "viem/chains";

const publicClient = createPublicClient({
  chain: mainnet,
  transport: http(),
});

async function simulateRevert(
  address: `0x${string}`,
  abi: any[],
  functionName: string,
  args: any[],
  sender: `0x${string}`
) {
  try {
    // simulateContract 会抛出一个带 revertReason 的异常
    await publicClient.simulateContract({
      address,
      abi,
      functionName,
      args,
      account: sender,
    });
    return null; // 不会运行到此处
  } catch (error: any) {
    // Viem 结构化错误码：ContractFunctionRevertedError
    if (error.cause?.name === "ContractFunctionRevertedError") {
      return error.cause.data?.errorName ?? error.cause.reason ?? "Unknown revert";
    }
    return error.message;
  }
}

import { useEffect, useState } from 'react';
import { Contract, JsonRpcProvider } from 'ethers';
import { ERC20_ABI } from './abis';

const PROVIDER_URL = 'wss://eth-mainnet.g.alchemy.com/v2/xxx';
const USDC = '0xA0b86a33E6441E6C7D3D4B4f6c7D3D4B4f6c7D3';

export function useErc20TransferEvents(address: string) {
  const [events, setEvents] = useState<any[]>([]);

  useEffect(() => {
    const provider = new JsonRpcProvider(PROVIDER_URL);
    const contract = new Contract(USDC, ERC20_ABI, provider);

    const handler = (from: string, to: string, amount: bigint, event: any) => {
      if (from.toLowerCase() === address.toLowerCase() ||
          to.toLowerCase() === address.toLowerCase()) {
        setEvents(prev => [...prev, { from, to, amount, logIndex: event.logIndex }]);
      }
    };

    // 持续监听 Transfer 事件
    contract.on("Transfer", handler);

    // 批量拉取最近 1000 个区块的历史事件，与实时监听构成"全量+增量"模式
    contract.queryFilter("Transfer", -1000, "latest")
      .then(logs => {
        const historical = logs
          .filter((l: any) =>
            l.args.from?.toLowerCase() === address.toLowerCase() ||
            l.args.to?.toLowerCase() === address.toLowerCase()
          )
          .map((l: any) => ({
            from: l.args.from,
            to: l.args.to,
            amount: l.args.amount,
            logIndex: l.logIndex,
          }));
        setEvents(prev => [...historical, ...prev]);
      });

    return () => {
      // 组件卸载时务必清理，避免内存泄漏与重复回调
      contract.off("Transfer", handler);
    };
  }, [address]);

  return events;
}

import { useEffect, useState } from 'react';
import { createPublicClient, webSocket } from 'viem';
import { mainnet }   from 'viem/chains';
import { erc20Abi }  from 'viem/erc20';

const client = createPublicClient({
  chain: mainnet,
  transport: webSocket('wss://eth-mainnet.g.alchemy.com/v2/xxx'),
});

export function useViemTransferEvents(address: `0x${string}`) {
  const [events, setEvents] = useState<any[]>([]);

  useEffect(() => {
    // Viem 的 watchContractEvent 返回 unwatch 函数
    const unwatch = client.watchContractEvent({
      address: '0xA0b86a33E6441E6C7D3D4B4f6c7D3D4B4f6c7D3',
      abi: erc20Abi,
      eventName: 'Transfer',
      args: { from: address, to: address }, // 细粒度过滤
      fromBlock: BigInt(await client.getBlockNumber()), // 避免重复拉取历史
      onLogs: (logs) => {
        setEvents(prev => [...prev, ...logs]);
      },
    });

    return () => {
      unwatch(); // 清理
    };
  }, [address]);

  return events;
}

import { useState, useCallback } from 'react';
import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
import { erc20Abi } from 'viem/erc20';

interface OptimisticState {
  status: 'idle' | 'pending' | 'success' | 'reverted';
  snapshot: bigint | null; // 交易前的余额快照
  optimisticValue: bigint; // 乐观更新的余额
}

export function useOptimisticTransfer(token: `0x${string}`) {
  const [state, setState] = useState<OptimisticState>({
    status: 'idle', snapshot: null, optimisticValue: 0n,
  });

  const { writeContract, data: hash } = useWriteContract();
  const { isLoading, isSuccess, isError } = useWaitForTransactionReceipt({ hash });

  const send = useCallback(
    async (to: `0x${string}`, currentBalance: bigint, amount: bigint) => {
      // 第 1 步：保存快照
      setState({
        status: 'pending',
        snapshot: currentBalance,
        optimisticValue: currentBalance - amount,
      });

      // 第 2 步：发起链上交易
      writeContract({
        address: token,
        abi: erc20Abi,
        functionName: 'transfer',
        args: [to, amount],
      });
    },
    [token, writeContract]
  );

  // 根据 wagmi 的状态自动处理确认/回滚
  if (state.status === 'pending') {
    if (isSuccess) {
      setState(prev => ({ ...prev, status: 'success' }));
    } else if (isError) {
      // 第 4 步：交易失败，从快照恢复
      setState(prev => ({
        ...prev,
        status: 'reverted',
        optimisticValue: prev.snapshot ?? 0n,
      }));
    }
  }

  return {
    send,
    balance: state.status === 'pending' ? state.optimisticValue : undefined,
    status: state.status,
    isConfirming: isLoading,
  };
}

/**
 * 将去中心化 URI 解析为浏览器可访问的 HTTP URL
 */
export function resolveUri(
  uri: string,
  gateway?: { ipfs?: string; arweave?: string }
): string {
  const gw = {
    ipfs: gateway?.ipfs ?? 'https://cf-ipfs.com/ipfs',
    arweave: gateway?.arweave ?? 'https://arweave.net',
  };

  if (uri.startsWith('ipfs://')) {
    return `${gw.ipfs}/${uri.slice(7)}`;
  }
  if (uri.startsWith('ar://')) {
    return `${gw.arweave}/${uri.slice(5)}`;
  }
  // 已经是 https 或 http，直接返回
  return uri;
}

import React, { useState, useEffect } from 'react';
import { resolveUri } from './utils/resolveUri';

interface NftDisplayProps {
  tokenURI: string;
  fallbackImage?: string;
}

export const NftDisplay: React.FC<NftDisplayProps> = ({
  tokenURI,
  fallbackImage = '/placeholder.png',
}) => {
  const [metadata, setMetadata] = useState<any>(null);
  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');

  useEffect(() => {
    const url = resolveUri(tokenURI, {
      ipfs: 'https://your-pinata-gateway.mypinata.cloud/ipfs',
      arweave: 'https://arweave.net',
    });

    fetch(url)
      .then((r) => r.json())
      .then((data) => {
        setMetadata(data);
        setStatus('success');
      })
      .catch(() => setStatus('error'));
  }, [tokenURI]);

  if (status === 'loading') return <div className="nft-placeholder">加载中…</div>;
  if (status === 'error')   return <img src={fallbackImage} alt="加载失败" />;

  const imageUrl = resolveUri(metadata?.image ?? '');

  return (
    <div className="nft-card">
      <img src={imageUrl} alt={metadata?.name ?? 'NFT'} loading="lazy" />
      <h3>{metadata?.name}</h3>
      <p>{metadata?.description}</p>
    </div>
  );
};

import { WebIrys } from '@irys/sdk';
import { BrowserProvider } from 'ethers';

export async function uploadToIrys(
  file: File,
  tags: { name: string; value: string }[]
): Promise<string> {
  // 通过浏览器钱包获取签名者
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();

  const webIrys = new WebIrys({
    url: 'https://node1.irys.xyz', // 或 https://devnet.irys.xyz 测试网
    token: 'ethereum',
    wallet: { provider: signer.provider, rpcUrl: undefined as any },
  });

  await webIrys.ready();

  const receipt = await webIrys.uploadFile(file, { tags });
  // 返回 ar://<transactionId>
  return `ar://${receipt.id}`;
}

export interface BridgeProvider {
  /** 发起跨链交易，返回源链 txHash */
  send(params: BridgeSendParams): Promise<{ srcTxHash: string }>;
  /** 查询跨链状态 */
  getStatus(srcChain: number, srcTxHash: string): Promise<BridgeStatus>;
  /** 预估到账时间（秒） */
  getEstimatedTime(srcChain: number, dstChain: number): number;
  /** 手动重试目标链交付（部分桥支持） */
  retry?(srcChain: number, srcTxHash: string): Promise<void>;
}

export type BridgeStatus =
  | 'pending'
  | 'source_confirmed'
  | 'delivered'
  | 'target_pending'
  | 'completed'
  | 'failed';

export interface BridgeSendParams {
  srcChain: number;
  dstChain: number;
  token: string;
  amount: string;
  recipient: string;
}

import { useCallback } from 'react';
import { useSwitchChain } from 'wagmi';

export function useSwitchOrAddChain() {
  const { switchChainAsync } = useSwitchChain();

  const switchOrAdd = useCallback(async (chainId: number) => {
    try {
      await switchChainAsync({ chainId });
    } catch (error: any) {
      // 4902 = 用户钱包中未添加该链
      if (error.code === 4902) {
        const chainConfig = SUPPORTED_CHAINS.find((c) => c.chainId === chainId);
        if (!chainConfig) throw new Error('不支持的链');

        await window.ethereum.request({
          method: 'wallet_addEthereumChain',
          params: [{
            chainId: `0x${chainId.toString(16)}`,
            chainName: chainConfig.name,
            rpcUrls: [chainConfig.rpcUrl],
            nativeCurrency: chainConfig.nativeCurrency,
            blockExplorerUrls: [chainConfig.blockExplorer],
          }],
        });
        // 添加后再次切换
        await switchChainAsync({ chainId });
      } else {
        throw error;
      }
    }
  }, [switchChainAsync]);

  return { switchOrAdd };
}

import React, { useState, useEffect } from 'react';

interface CrossChainTransferStatusProps {
  srcChain: number;
  dstChain: number;
  srcTxHash: string;
  bridgeStatus: BridgeStatus;
  onRetry?: () => void;
}

export const CrossChainTransferStatus: React.FC<CrossChainTransferStatusProps> = ({
  srcChain,
  dstChain,
  srcTxHash,
  bridgeStatus,
  onRetry,
}) => {
  const steps = [
    { key: 'pending',           label: '源链交易已提交' },
    { key: 'source_confirmed',  label: '源链已确认' },
    { key: 'delivered',         label: '跨链消息已送达' },
    { key: 'target_pending',    label: '目标链交易执行中' },
    { key: 'completed',         label: '目标链已到账' },
  ];

  const currentIndex = steps.findIndex((s) => s.key === bridgeStatus);
  const isFailed = bridgeStatus === 'failed';

  return (
    <div className="cross-chain-status">
      <h4>跨链转账进度</h4>
      <div className="steps">
        {steps.map((step, i) => (
          <div
            key={step.key}
            className={`step ${i <= currentIndex ? 'active' : ''}${isFailed ? 'failed' : ''}`}
          >
            <div className="step-dot" />
            <span>{step.label}</span>
          </div>
        ))}
      </div>
      <div className="tx-links">
        <a href={`${getExplorer(srcChain)}/tx/${srcTxHash}`} target="_blank" rel="noopener">
          源链交易
        </a>
      </div>
      {isFailed && onRetry && (
        <button onClick={onRetry} className="retry-btn">
          手动重试
        </button>
      )}
    </div>
  );
}